<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script>
			$(function(){
				/*通过脚本设置轮播速度*/
				$("#myCarousel").carousel({
					interval:1500
				});
			});s
		</script>
	</head>
	<body>
		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="img/pic1.jpg"  title="第1张图"/>
					<div class="carousel-caption">第1张图</div>
				</div>
				<div class="item">
					<img src="img/pic2.jpg"  title="第2张图"/>
					<div class="carousel-caption">第2张图</div>
				</div>
				<div class="item">
					<img src="img/pic3.jpg"  title="第3张图"/>
					<div class="carousel-caption">第3张图</div>
				</div>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a href="#myCarousel" class="carousel-control left" data-slide="prev">&lt;</a>
			<a href="#myCarousel" class="carousel-control right" data-slide="next">&gt;</a>
		</div>
	</body>
</html>
